<template>
  <div class="app">
    <merchantHeader />
    <div class="back">
      <div class="con">
        <div class="pxes"></div>
        <div class="listneo">
          <businessL />
          <div class="conres">
            <div class="ra">
              <h3>订单查询</h3>
            </div>
            <div class="yuansdj">
              <div class="lino">快速筛选订单：</div>
              <div class="list_org">
                <ul>
                  <li
                    class="unchecked"
                    :class="checkedState == index? 'clickState':''"
                    v-for="(item,index) in nameList"
                    :key="index"
                    @click="switchover(index,$event)"
                    :data-id="item.state"
                  >{{ item.name }}</li>
                </ul>
              </div>
            </div>
            <div class="forms">
              <el-form :inline="true" label-width="140px" class="demo-ruleForm">
                <el-form-item label="订单编号：">
                  <el-input v-model="orderNumber" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="快递单号：">
                  <el-input v-model="expressNumber" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="收件人姓名：">
                  <el-input v-model="addresseeName" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="收货人手机号：">
                  <el-input v-model="phone" style="width: 100%;"></el-input>
                </el-form-item>

                <el-form-item label="订单状态：">
                  <el-select v-model="State" placeholder="请选择订单状态">
                    <el-option label="无状态" value></el-option>
                    <el-option label="待付款" value="0"></el-option>
                    <el-option label="待发货" value="1"></el-option>
                    <el-option label="已发货" value="2"></el-option>
                    <el-option label="已完成" value="3"></el-option>
                    <el-option label="已关闭" value="4"></el-option>
                    <el-option label="无效订单" value="5"></el-option>
                    <el-option label="已评价" value="6"></el-option>
                    <el-option label="未评价" value="7"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="下单时间">
                  <el-col :span="11">
                    <el-form-item>
                      <el-date-picker
                        v-model="timeInterval"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>

                <el-form-item style="margin-left: 347px;">
                  <el-button type="danger" @click="submitForm()">查询</el-button>
                  <el-button type="danger" @click="resetForm()">批量导出</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="dzlist">
              <div class="tat">
                <span>查询结果</span>
                <p style="line-height:24px">
                  共
                  <span style="color:blue">5条</span>查询数据
                </p>
              </div>
              <el-table
                :data="tableData"
                border
                :header-cell-style="{background:'#D6DCE1',color:'#2D405E'}"
                style="width: 873px;margin:15px auto">
              >
                <el-table-column prop="orderNumber" label="活动ID"></el-table-column>
                <el-table-column prop="orderNumber" label="订单号"></el-table-column>
                <el-table-column prop="orderTime" label="下单时间"></el-table-column>
                <el-table-column prop="activityType" label="活动类型"></el-table-column>
                <el-table-column prop="productName" label="产品名称"></el-table-column>
                <el-table-column prop="quantity" width="60px" label="数量"></el-table-column>
                <el-table-column prop="addresseeName" label="收货人"></el-table-column>
                <el-table-column prop="consigneeSite" label="收货地址"></el-table-column>
                <el-table-column prop="phone" label="联系电话"></el-table-column>
                <el-table-column prop="orderState" label="订单状态"></el-table-column>
                <el-table-column prop="expressNumber" label="快递单号"></el-table-column>
              </el-table>
            </div>
            <el-pagination
              background
              layout="prev, pager, next"
              :hide-on-single-page="value"
              :total="total"
              :page-size="5"
              :pager-count="15"
              :current-page="currentPage"
              prev-text="上一页"
              next-text="下一页"
              @current-change="currentChange"
            ></el-pagination>
            <businessF />
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>
<script>
import merchantHeader from "@/components/merchantHeader";
import Footer from "@/components/Footer";
import businessL from "@/components/businessL";
import businessF from "@/components/businessF";
import { jsDateFormatter } from "@/utils/formatDate";
export default {
  components: {
    merchantHeader,
    Footer,
    businessL,
    businessF
  },
  data() {
    return {
      tableData: [
        // {
        // orderNumber: '122222222222222222222',
        // orderTime: '2019/11/29 00:00:00',
        // activityType: '免费体验',
        // productName:'兰蔻粉水',
        // quantity:'1',
        // consignee:'王玉仕',
        // consigneeSite:'湖北省十堰市房县八里村三组',
        // phone:'15623957281',
        // orderState:'代付款',
        // expressNumber:'555554545454545',
        // },
      ],
      nameList: [
        { name: "待发货", state: 1 },
        { name: "已发货", state: 2 },
        { name: "未签收", state: 3 },
        { name: "已关闭", state: 4 }
      ],
      checkedState: 0, // 状态： 0选中状态  -1选中状态
      value: true, //只有一页时显示隐藏
      currentPage: 1, //当前页码
      pageSize: 5, //每页数据条数
      total: 0, //总条目数
      orderState: "1", //订单状态

      orderNumber: "", //订单编号
      expressNumber: "", //快递单号
      addresseeName: "", //收件人姓名
      phone: "", //联系电话
      State: "", //input订单状态
      startTime: "", //开始时间
      overTime: "", //结束时间
      timeInterval: "" //时间区间
    };
  },
  created() {
    this.ptGetOrderList();
  },
  methods: {
    // 点击查询
    submitForm() {
      this.orderState = this.State;
      this.currentPage = 1;
      if (this.timeInterval) {
        this.startTime = jsDateFormatter(this.timeInterval[0]);
        this.overTime = jsDateFormatter(this.timeInterval[1]);
      } else {
        this.startTime = "";
        this.overTime = "";
      }
      this.ptGetOrderList();
    },
    //导出
    resetForm() {
      console.log(11);
    },
    // currentPage(页码) 改变时会触发
    currentChange(val) {
      this.currentPage = "";
      this.currentPage = val;
      this.ptGetOrderList();
    },
    // 点击切换状态
    switchover(key, e) {
      this.checkedState = key;
      this.orderState = e.target.dataset.id;
      this.currentPage = 1;
      this.orderNumber = "";
      this.expressNumber = "";
      this.addresseeName = "";
      this.phone = "";
      this.State = "";
      this.timeInterval = "";

      this.ptGetOrderList();
    },
    // 商家 条件 订单查询
    async ptGetOrderList() {
      // let _th = this;
      // _th.tableData = []
      // let res = await getOrderList({
      //   data:{
      //     page:_th.currentPage,
      //     pageSize:5,
      //     status:_th.orderState,
      //     businessId:1,
      //     orderSn:_th.orderNumber,
      //     deliverySn:_th.expressNumber,
      //     goodsNum:_th.addresseeName,
      //     phoneNumber:_th.phone,
      //     startTime:_th.startTime,
      //     endTime:_th.overTime,
      //     hp:1,
      //   }
      // })
      // if(res.code == 200){
      //   console.log(res)
      //   _th.total = res.date.total
      //   if(res.date.data){
      //     let data = res.date.data
      //     for(let p in data){
      //       switch(data[p].activityType){
      //         case 0:
      //           data[p].activityType = "免费体验";
      //           break;
      //           case 1:
      //           data[p].activityType = "区间竞猜";
      //           break;
      //           case 2:
      //           data[p].activityType = "新品首发";
      //           break;
      //       }
      //        switch(data[p].status){
      //         case 0:
      //           data[p].status = "待付款";
      //           break;
      //           case 1:
      //           data[p].status = "待发货";
      //           break;
      //           case 2:
      //           data[p].status = "已发货";
      //           break;
      //           case 3:
      //           data[p].status = "已完成";
      //           break;
      //           case 4:
      //           data[p].status = "已关闭";
      //           break;
      //           case 5:
      //           data[p].status = "无效订单";
      //           break;
      //           case 6:
      //           data[p].status = "已评价";
      //           break;
      //           case 7:
      //           data[p].status = "未评价";
      //           break;
      //       }
      //       let obj ={
      //       orderNumber: data[p].orderSn,
      //       orderTime: data[p].createTime,
      //       activityType: data[p].activityType,
      //       productName:data[p].goodsName,
      //       quantity:data[p].goodsNum,
      //       addresseeName:data[p].userName,
      //       consigneeSite:data[p].detailAddress,
      //       phone:data[p].phoneNumber,
      //       orderState:data[p].status,
      //       expressNumber:data[p].deliverySn,
      //       }
      //       _th.tableData.push(obj)
      //     }
      //   }
      // }else{
      //   console.log("没有数据")
      // }
    }
  }
};
</script>
<style scoped>
.app /deep/ .ist_l .ist_c li:nth-child(1) {
  background-color: #ff9381;
  width: 126px;
  height: 50px;
  display: block;
}

.back {
  background-color: #f06048;
}
.pxes {
  height: 15px;
}
.back .con {
  width: 1200px;
  margin: 0 auto;
  background-color: #eee;
}
.listneo {
  width: 1161px;
  margin: 0px auto;
  display: flex;
  justify-content: space-between;
}
.conres {
  width: 902px;
  border-radius: 6px;
  background-color: #fff;
}
.conres .ra h3 {
  font-size: 20px;
  color: #f06048;
  padding-left: 14px;
  border-bottom: 1px solid #cecece;
  margin-top: 15px;
  padding-bottom: 10px;
}

.shejh {
  display: flex;
  margin-left: 20px;
  margin-top: 15px;
  line-height: 20px;
}
.shejh div:nth-child(1) {
  font-size: 20px;
}
.shejh div:nth-child(2) {
  font-size: 14px;
  margin-left: 40px;
}
.wdmewdefme {
  display: flex;
}
.mubiao {
  display: flex;
  margin-left: 20px;
  margin-top: 40px;
}
.toefmn_wk {
  margin-right: 12px;
}
.toefmn_wk span {
  display: block;
}
.toefmn_wk .ene {
  color: #f06048;
}
.one_mw {
  display: flex;
}
.wnwe_wdnn .ee_q {
  margin-top: 20px;
}
.wnwe_wdnn .ee_q h5 {
  font-size: 18px;
}
.wnwe_wdnn {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  width: 300px;
}
.top_o2 {
  font-size: 18px;
  line-height: 20px;
  margin-left: 20px;
  margin-top: 25px;
  display: flex;
}
.ower_to {
  width: 873px;
  height: 141px;
  border: solid 1px #a0a0a0;
  margin: 10px auto;
  display: flex;
  text-align: center;
  line-height: 45px;
}
.ower_to h4 {
  font-size: 18px;
}
.jaoyishuj {
  margin-bottom: 35px;
}
.errror .hekome1 {
  width: 20%;
  border-right: 1px solid #a0a0a0;
}
.hekome2 {
  text-align: center;
  margin-left: 20px;
}
.list_org {
  height: 40px;
}
.yuansdj {
  display: flex;
  border-bottom: 6px solid #fff;
}
.lino {
  display: inline-block;
  font-size: 20px;
  margin-left: 10px;
  line-height: 40px;
  margin-top: 10px;
}
/*  订单未选中状态 */
.list_org ul li {
  display: inline-block;
  line-height: 40px;
  width: 100px;
  /* border: 1px solid #DCDCDC; */
  text-align: center;
  font-size: 16px;
  margin-top: 10px;
  margin-left: 8px;
}
.forms {
  margin-top: 20px;
}
.dzlist .tat {
  font-size: 18px;
  margin-top: 10px;
  margin-left: 20px;
  margin-bottom: 10px;
  display: flex;
}
/* 未选中状态 */
.unchecked {
  background-color: #dcdcdc;
}
/* 选中状态 */
.clickState {
  background-color: #f06048;
}
</style>